<template>
    <view>
        <view class="baojian_ding">
            <view>茶馆设置</view>
            <navigator url="/pages/baojian/addbaojian">新增包厢</navigator>
        </view>

        <view class="beijing">
            <view v-for="(bj, index) in list" :key="index">
                <view class="baojian_kk">
                    <view class="baojian_kk1">
                        <view><view class="baojian_tx"></view></view>

                        <view class="baojian_kk4">
                            <view class="baojian_kk3">
                                <view>{{ bj.name }}</view>
                                <navigator :url="'/packageB/baoxiangguanli/baoxiangguanli?baojian=' + JSON.stringify(bj)"><image class="baojian_dyh" src="/static/img/大于号.png"></image></navigator>
                            </view>

                            <view class="baojian_text">地址：{{ bj.address }}</view>
                            <view class="baojian_text">金额：￥{{ bj.price }}</view>
                        </view>
                    </view>

                    <view class="baojian_kk2">
                        <view class="yjkm">
                            <view @click="yijiankaimen" :id="item.id">一键开门</view>
                        </view>

                        <view class="smkm">
                            <view>扫码开门</view>
                        </view>

                        <view class="kd">
                            <view @click="opendeng" :id="item.id">开灯</view>
                        </view>

                        <view class="gd">
                            <view @click="closedeng" :id="item.id">关灯</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/baojian/baojian.js
import {chashibaojianlist, cleancontrollerElectricity, cleancontrollerOpenDoor} from "@/common/api.js"
var app = getApp();
export default {
    data() {
        return {
            list: [],
			page:1,
			limit: 20,
			nextpageflag: true
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		if (app.globalData.store_id) {
			this.getlist()
		}else{
			uni.showModal({
				title: '提示',
				content: '请先选择门店',
				success: function (res) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			})
		}
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
		if(this.nextpageflag){
			const page = this.page + 1
			this.setData({
				page: page
			})
			this.getlist()
		}
	},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		getlist(){
			const paramData = {
				page: this.page,
				limit: this.limit,
				store_id: app.globalData.store_id
			}
			chashibaojianlist(paramData, (res => {
				const list = res.data.data.list
				console.log(list)
				if(list.length < this.limit) {
					this.setData({
						nextpageflag: false
					})
				}
				const newlist = this.list.concat(list)
				this.setData({
					list: newlist
				})
				uni.hideLoading();
			}))
		},
		opendeng(option){
			const id = option.currentTarget.id
			const paramData = {
				house_id: id,
				status: 1
			}
			cleancontrollerElectricity(paramData, (res => {
				uni.showToast({
					title: res.data.msg
				})
			}))
		},
		closedeng(option){
			const id = option.currentTarget.id
			const paramData = {
				house_id: id,
				status: 0
			}
			cleancontrollerElectricity(paramData, (res => {
				uni.showToast({
					title: res.data.msg
				})
			}))
		},
		yijiankaimen(option){
			const id = option.currentTarget.id
			const paramData = {
				house_id: id,
				onclick: 1
			}
			cleancontrollerOpenDoor(paramData, (res => {
				uni.showToast({
					title: res.data.msg
				})
			}))
		}
		
	}
};
</script>
<style>
.baojian_ding {
    font-weight: bold;
    font-size: 36rpx;
    color: rgb(82, 79, 80);
    height: 100rpx;
    padding: 20rpx 40rpx 0rpx 40rpx;
    display: flex;
    justify-content: space-between;
}

.beijing {
    background-color: rgb(241, 241, 241);
    padding: 10rpx 30rpx 800rpx 30rpx;
}

.baojian_kk {
    background-color: rgb(255, 255, 255);
    padding: 20rpx 30rpx 20rpx 30rpx;
    margin-top: 20rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
}

.baojian_kk1 {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: rgb(80, 80, 80);
}

.baojian_kk2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
    color: rgba(255, 255, 255, 0.945);
    font-size: 30rpx;
}
.baojian_kk3 {
    display: flex;
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
}
.baojian_kk4 {
    margin-top: 40rpx;
}
.baojian_tx {
    width: 150rpx;
    height: 150rpx;
    background-color: cyan;
    border-radius: 50%;
    margin-right: 80rpx;
}
.baojian_dyh {
    width: 40rpx;
    height: 40rpx;
}

.baojian_text {
    width: 400rpx;
    font-size: 37rpx;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    margin-bottom: 10rpx;
}
.yjkm {
    background-color: darkorange;
    width: 170rpx;
    height: 70rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.smkm {
    background-color: rgb(85, 179, 241);
    width: 170rpx;
    height: 70rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kd {
    background-color: rgb(34, 231, 16);
    width: 170rpx;
    height: 70rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gd {
    background-color: rgb(250, 227, 18);
    width: 170rpx;
    height: 70rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}
</style>
